<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                :labelCol="{ span: 10 }"
                :wrapperCol="{ span: 14 }"
                @on-search="search"
                @on-reset="onReset"
              ></pro-query>
            </div>
            <!-- 列表 -->
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :operate="operate"
              :toolbar="toolbar"
              :param="state.param"
              :pagination="pagination"
              :operationWidth="180"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
export default {
  name: "finance"
}
</script>
<script setup>
import { filterEmptyByObject } from "../../tools/common";
import { useI18n } from "vue-i18n";
import { page } from "../../api/module/finance";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getDictByCodesReturnObj } from "../../tools/get-dict";
import dictEnum from "../../const/dict";
import moment from 'moment'
const tableRef = ref();
const { t } = useI18n();
const columns = [
  { title: t('financeManage.label.finance-0'), width: 150, ellipsis: true, dataIndex: "orderSn", key: "orderSn" },
  { title: t('financeManage.label.finance-2'), width: 150, ellipsis: true, dataIndex: "waterSn", key: "waterSn" },
  { title: t('financeManage.label.finance-3'), dataIndex: "recPayNo", ellipsis: true, key: "recPayNo", width: 150 },
  {
    title: t('financeManage.label.finance-4'),
    dataIndex: "payInfo",
    key: "payInfo",
    width: 150,
    ellipsis: true,
  },
  {
    title: t('financeManage.label.finance-5'),
    dataIndex: "currency",
    ellipsis: true,
    key: "currency",
    width: 150,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.CURRENCY]
        ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    },
  },
  { title: t('financeManage.label.finance-6'), ellipsis: true, dataIndex: "tradeAmt", key: "tradeAmt", width: 150 },
  { title: t('financeManage.label.finance-7'), ellipsis: true, dataIndex: "rmbAmt", key: "rmbAmt", width: 150 },
  { title: t('financeManage.label.finance-8'), ellipsis: true, dataIndex: "phone", key: "phone", width: 150 },
  { title: t('financeManage.label.finance-9'), ellipsis: true, dataIndex: "createTime", key: "createTime", width: 150 },
  {
    title: t('financeManage.label.finance-10'),
    dataIndex: "fncType",
    key: "fncType",
    width: 150,
    ellipsis: true,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.FINANCE_TYPE]
        ? dictLists.data[dictEnum.FINANCE_TYPE].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    },
  },
];
const operate = [
  // {
  //   label: t('financeManage.label.finance-11'),
  //   event: function ({ id }) {},
  // },
  {
    label: t('financeManage.label.finance-12'),
    show: (record) => {
      if (record.fncType == 1) {
        return true
      }
      return false
    },
    event: (record) => {
      router.push({
        path: '/finance/receipt-order',
        query: {}
      })
    },
  },
  {
    label: t('financeManage.label.finance-13'),
    show: (record) => {
      if (record.fncType == 2) {
        return true
      }
      return false
    },
    event: (record) => {
      router.push({
        path: '/finance/payment-order',
        query: {}
      })
    },
  },
];
const toolbar = [
  {
    code: "",
    label: t("button.batchImport"),
    type: "",
    event: (selectedRowKeys) => {
      handleExport();
    },
  },
];

const pagination = {
  pageNum: 1,
  pageSize: 10,
};
const handleExport = () => {};
/// 数据来源 [模拟]
const fetch = async (param) => {
  let response = await page(param);
  response.data && response.data.record && response.data.record.map(item => {
    const obj = dictLists.data[dictEnum.TRADING_PARTNER] ? dictLists.data[dictEnum.TRADING_PARTNER].find(v => v.value == item.tradeType) : {}
    let partner = obj ? obj.label || '' : ''
    item.payInfo = (partner + ' | ' +  (item.payName || '')) || ''
    return item
  })
  return {
    data: response.data.record,
    total: response.data.total,
  };
};
// 路由
const router = useRouter();
// 筛选需要的数据
let dictLists = reactive({
  data: {},
});
//
const state = reactive({
  selectedRowKeys: [],
  param: {},
});
// 搜索需要的参数
let searchParams = reactive({
  params: [],
});
onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.CURRENCY, // 币种
    dictEnum.TRADING_PARTNER, // 交易对象
    dictEnum.PAY_METHOD, // 支付方式
    dictEnum.FINANCE_TYPE, // 财务类型
    dictEnum.GENERATION_MODE, // 产生方式
    dictEnum.BILL_SOURCE, // 账单类型
  ]);

  searchParams.params = [
    // {
    //   key: "tradePpl",
    //   type: "input",
    //   label: "交易人",
    //   placeholder: t('placeholder.pleaseEnter')
    // },
    {
      key: "orderSn",
      type: "input",
      label: t('financeManage.label.finance-0'),
      placeholder: t('placeholder.pleaseEnter'),
    },
    {
      key: "tradeType",
      type: "select",
      label: t('financeManage.label.finance-4'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.TRADING_PARTNER],
    },
    {
      key: "paymentMethod",
      type: "select",
      label: t('financeManage.label.finance-14'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.PAY_METHOD],
    },
    {
      key: "tradePpl",
      type: "input",
      label: t('financeManage.label.finance-4'),
      placeholder: t('placeholder.pleaseEnter'),
      hidden: true,
    },
    {
      key: "fncType",
      type: "select",
      label: t('financeManage.label.finance-10'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.FINANCE_TYPE],
      hidden: true,
    },
    {
      key: "produceWay",
      type: "select",
      label: t('financeManage.label.finance-16'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.GENERATION_MODE],
      hidden: true,
    },
    {
      key: "billSrc",
      type: "select",
      label: t('financeManage.label.finance-17'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.BILL_SOURCE],
      hidden: true,
    },
    {
      key: "currency",
      type: "select",
      label: t('financeManage.label.finance-5'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.CURRENCY],
      hidden: true,
    },
    {
      dataIndex: "createTime",
      key: "createTime",
      keys: ["bgeinTime", "endTime"],
      type: "rangeTime",
      label: t('label.creationTime'),
      showTime: { format: "HH:mm:ss" },
      format: "YYYY:MM:DD HH:mm:ss",
      valueFormat: "YYYY:MM:DD HH:mm:ss",
      placeholder: [t('label.startTime'), t('label.endTime')],
      hidden: true,
    },
  ];
});
// 查询数据
const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
    bgeinTime: value.createTime ? moment(value.createTime[0]).valueOf() : undefined,
    endTime: value.createTime ? moment(value.createTime[1]).valueOf() : undefined,
  };
};
// 查询数据
const onReset = () => {
  state.param = {};
};

const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};
</script>

<style scoped></style>
